<template>
  <div class="control-container">
    <div class="nav-tabs">
      <button :class="{ active: props.activeTab  === 'two' }" @click="updateTab('two')">
        二面叉
      </button>
      <button :class="{ active: props.activeTab  === 'four' }" @click="updateTab('four')">
        四面叉
      </button>
    </div>
 
    <div class="control-content">
      <div class="control-group">
        <h5>生产要求</h5>
        <div class="form-row">
          <div class="form-item">
            <label class="radio-container">
              <input 
                type="radio" 
                v-model="localParams.customize" 
                :value="1"
                @change="handleProductionTypeChange"
              >
              <span class="checkmark"></span>
              定制
            </label>
            <label class="radio-container">
              <input
                type="radio"
                v-model="localParams.customize" 
                :value="0"
                @change="handleProductionTypeChange"
              >
              <span class="checkmark"></span>
              二手存货
            </label>
            <div class="cargo-description">
              承载货物描述：请填写于下方备注 
            </div>
          </div>
        </div>
 
        <h5>尺寸设置</h5>
        <div class="form-row">
          <div class="form-item">
            <label>板条长度 (cm):</label>
            <div class="input-group">
              <input type="range" v-model.number="localParams.boardLength"  min="10" max="200" step="5"
                @input="emitUpdate">
              <input type="number" v-model.number="localParams.boardLength"  min="10" max="200" step="5"
                @input="emitUpdate" class="number-input">
            </div>
          </div>
          <div class="form-item">
            <label>{{ props.activeTab  === 'two' ? '木方长度 (cm):' : '腿子长度 (cm):' }}</label>
            <div class="input-group">
              <input type="range" v-model.number="localParams.beamLength"  min="10" max="200" step="5" @input="emitUpdate">
              <input type="number" v-model.number="localParams.beamLength"  min="10" max="200" step="5" @input="emitUpdate"
                class="number-input">
            </div>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>面板-腿子 类型:</label>
            <select v-model="localParams.panel_leg"  @change="emitUpdate" class="panel-select">
              <option 
                v-for="option in panelTypeOptions" 
                :key="option.value"  
                :value="option.value" 
              >
                {{ option.label  }}
              </option>
            </select>
          </div>
 
          <div class="form-item" v-if="showBottomType">
            <label>底铺材料:</label>
            <select v-model="localParams.t_bottomlayer" @change="emitUpdate" class="panel-select">
              <option :value="0">无</option>
              <option :value="1">底部拉秤</option>
            </select>
          </div>
          
          <div class="form-item" v-if="showLegStructure">
            <label>腿子结构:</label>
            <select v-model="localParams.f_structure" @change="emitUpdate" class="panel-select">
              <option value="A">A型结构</option>
              <option value="B">B型结构</option>
            </select>
          </div>
        </div>
        
        <div class="form-row" v-if="localParams.customize  === 1">
          <div class="form-item" v-if="props.activeTab  === 'two'">
            <label>木方布局:</label>
            <select v-model="localParams.t_leglayout" @change="emitUpdate" class="panel-select">
              <option :value="1">3条木方</option>
              <option :value="2">4条木方(4:2:4)</option>
            </select>
          </div>
 
          <div class="form-item" v-if="props.activeTab  === 'four'">
            <div class="height-control">
              <label class="checkbox-container">
                <input type="checkbox" v-model="localParams.useCustomHeight"  @change="handleHeightModeChange">
                <span class="checkmark"></span>
                垫块高度 (cm):
              </label>
              <div v-if="localParams.useCustomHeight"  class="input-group">
                <input type="range" v-model.number="localParams.f_blockheight"  min="8" max="20" step="1"
                  @input="emitUpdate">
                <input type="number" v-model.number="localParams.f_blockheight"  min="8" max="20" step="1"
                  @input="emitUpdate" class="number-input">
              </div>
              <div v-else class="standard-display">
                &nbsp;&nbsp;&nbsp;通用标准高度
              </div>
            </div>
          </div>
 
          <div class="form-item">
            <label>板翼 (cm):</label>
            <div class="input-group">
              <input type="range" v-model.number="localParams.tf_boardwing"  min="0" max="20" step="1" @input="emitUpdate">
              <input type="number" v-model.number="localParams.tf_boardwing"  min="0" max="20" step="1" @input="emitUpdate"
                class="number-input">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>






<script setup>
import { ref, watch, computed, nextTick } from 'vue'

const props = defineProps({
  activeTab: {
    type: String,
    required: true,
    validator: value => ['two', 'four'].includes(value)
  },
  params: {
    type: Object,
    required: true,
    default: () => ({
      customize: 0,
      boardLength: 100,
      beamLength: 100,
      panel_leg: 0,
      t_bottomlayer: 0,
      t_leglayout: 0,
      tf_boardwing: 0,
      f_structure: 'N',
      f_blockheight: 10,
      useCustomHeight: false
    })
  }
})

const emit = defineEmits(['update:activeTab', 'update:params', 'update'])

// 🔥 修复：使用计算属性来确保参数同步
const localParams = computed({
  get: () => ({ ...props.params }),
  set: (value) => {
    emit('update:params', value)
    emit('update', value)
  }
})

// tab切换
const updateTab = (tab) => {
  emit('update:activeTab', tab)
}

// 提交参数更新
const emitUpdate = () => {
  emit('update', { ...localParams.value })
}

// 高度模式处理
const handleHeightModeChange = () => {
  if (localParams.value.useCustomHeight) {
    localParams.value.f_blockheight = 10
  } 
  emitUpdate()
}

// 生产类型切换
const handleProductionTypeChange = () => {
  
  if (localParams.value.customize === 0) {
    // 二手模式
    localParams.value.tf_boardwing = 0
    localParams.value.useCustomHeight = false
    localParams.value.f_blockheight = 0
    
    if (props.activeTab === 'two') {
      localParams.value.t_leglayout = 0
      localParams.value.t_bottomlayer = 0
    } else {
      localParams.value.f_structure = 'N'
      
    }
  } else {
    // 定制模式
    if (props.activeTab === 'two') {
      if (!localParams.value.t_leglayout) {
        localParams.value.t_leglayout = 1
      }
    } else {
      if (!localParams.value.f_structure || localParams.value.f_structure === 'N') {
        localParams.value.f_structure = 'A'
      }
      if (localParams.value.useCustomHeight && !localParams.value.f_blockheight) {
        localParams.value.f_blockheight = 10
      }
    }
  }
  emitUpdate()
}

// 计算属性
const panelTypeOptions = computed(() => [
  { value: 0, label: '板条-原木' },
  { value: 1, label: '胶合板-多层板' }
])

const showBottomType = computed(() => (
  props.activeTab === 'two' && localParams.value.customize === 1 
))

const showLegStructure = computed(() => (
  props.activeTab === 'four' && localParams.value.customize === 1 
))

// 🔥 修复：监听activeTab变化，确保控制面板参数与当前tab匹配
watch(() => props.activeTab, (newTab, oldTab) => {
  if (newTab !== oldTab) {
    // 触发一次更新，确保3D显示同步
    nextTick(() => {
      emitUpdate()
    })
  }
})


</script>










 
<style scoped>
.control-container {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ddd;
  background-color: white;
}
 
.nav-tabs {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}
 
.nav-tabs button {
  flex: 1;
  padding: 8px;
  margin: 0 5px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: all 0.3s;
}
 
.nav-tabs button.active  {
  background-color: #8B4513;
  color: white;
}
 
.control-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}
 
.control-group {
  margin-bottom: 15px;
}
 
.control-group h5 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}
 
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}
 
.form-item {
  flex: 1;
}
 
.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}
 
.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
 
input[type="range"] { 
  -webkit-appearance: none;
  flex: 1;
  height: 8px;
  background: #ddd;
  border-radius: 4px;

}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #8B4513;
  border-radius: 50%;
  cursor: pointer;
}
 
.number-input {
  width: 70px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}
 
.panel-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}
 
.radio-container {
  display: flex;
  align-items: center;
  margin-right: 15px;
  cursor: pointer;
}
 
.radio-container input[type="radio"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
 
.cargo-description {
  color: #888;
  margin-top: 8px;
  font-size: 14px;
}
 
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}
 
.checkbox-container input {
  margin-right: 8px;
}
 
.standard-display {
  color: #888;
}
 
@media (max-width: 768px) {
  .control-container {
    width: 100%;
  } 
 
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
 
  .input-group {
    flex-direction: column;
    align-items: stretch;
  }
 
  .number-input,
  .panel-select {
    width: 100%;
  }
}
</style>